<template>
  <div class="app-layout">
    <!-- 顶部路由栏 （根据meta控制标题） -->
    <van-nav-bar
        :fixed="true"
        :title="route.meta.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <div class="app-content">
      <!-- 内容区域 -->
      <router-view />
    </div>

    <div>
      <!-- 底部标签栏（根据meta控制显示） -->
      <van-tabbar v-model="active" v-if="route.meta.showTabBar" @change="onChange">
        <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="health" icon="search">健康头条</van-tabbar-item>
        <van-tabbar-item name="my" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from "vue";
import { useTabbarStore } from '../stores/tabbar';
import { storeToRefs } from 'pinia';

const route = useRoute();
const router = useRouter();
const tabbarStore = useTabbarStore();
const { active } = storeToRefs(tabbarStore);

const onChange = (index) => {
    tabbarStore.setActive(index);
    if (index === 'home') {
      router.push('/home');
    } else if (index === 'health') {
      router.push('/health');
    } else if (index === 'my') {
      router.push('/my');
    }
}

const onClickLeft = () => {
  history.back();
}
</script>

<style scoped>
.app-layout .app-content{
  margin-top: 7vh;
}
</style>